<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<script>
function validateForm()
{

var x=document.forms["CreateAccount"]["name"].value;
if (x==null || x=="")
  {
  alert("Name must be filled out.");
  return false;
  }
var characterPattern = new RegExp("^[A-Za-z ]+$");
if (!characterPattern.test(x))
{
alert("Only english letters are accepted for the Name.");
return false;
}

var x=document.forms["CreateAccount"]["username"].value;
if (x==null || x=="")
  {
  alert("Username must be filled out.");
  return false;
  }


var y=document.forms["CreateAccount"]["password"].value;
var z=document.forms["CreateAccount"]["re_password"].value;
if (y==null || y=="")
  {
  alert("Password must be filled out.");
  return false;
  }
if (y.length < 4)
  {
	alert("Password must have at least 4 characters.");
	return false;
  }
if(y != z) {
		alert("The passwords are mismatch.");
		return false;
	}
	
y=document.forms["CreateAccount"]["name"].value;
if (y==null || y=="")
  {
  alert("Name must be filled out.");
  return false;
  }
  
var emailPattern = new RegExp("^[A-Za-z0-9_.]+[@][A-Za-z0-9_]+(.[A-Za-z0-9]+)+$");
y=document.forms["CreateAccount"]["email"].value;
if (y==null || y=="")
  {
  alert("E-mail must be filled out.");
  return false;
  } 
  else if (!emailPattern.test(y)){
  alert("The email address is invalid.");
  return false;
}

y=document.forms["CreateAccount"]["street"].value;
if (y==null || y=="")
  {
  alert("Street must be filled out.");
  return false;
  }
y=document.forms["CreateAccount"]["streetNbr"].value;
if (y==null || y=="")
  {
  alert("Street Number must be filled out.");
  return false;
  }
y=document.forms["CreateAccount"]["city"].value;
if (y==null || y=="")
  {
  alert("City must be filled out.");
  return false;
  }
if (!characterPattern.test(y))
{
alert("Only english letters are accepted for the City.");
return false;
}

y=document.forms["CreateAccount"]["postalCode"].value;
if (y==null || y=="")
  {
  alert("Postal Code must be filled out.");
  return false;
  }
var postcodePattern = new RegExp("^[A-Za-z][0-9][A-Za-z][0-9][A-Za-z][0-9]$");
if (!postcodePattern.test(y))
{
alert("The postal code is invalid.(e.g.: H3T1P8)");
return false;
}
y=document.forms["CreateAccount"]["country"].value;
if (y==null || y=="")
  {
  alert("Country must be filled out.");
  return false;
  }

  
  
  
}
</script>


  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>iMusic - Create Account</title>
  <link rel="stylesheet" type="text/css" href="iMusicMenu/sdmenu.css">
  <script type="text/javascript" src="iMusicMenu/sdmenu.js"></script></head><body>
Welcome to iMusic !!!<br>
Please enter your information:<br>

<br>

<table style="text-align: left; width: 462px;" border="0" cellpadding="2" cellspacing="2">

  <tbody>
  	<form style="text-align: left;" action="CreateAccount" method="post" target="_top" name="CreateAccount" onsubmit="return validateForm()">
  
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Name (*):</small><br>
      </big></td>
      <td style="vertical-align: top; width: 192px;"><input name="name"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Sex:&nbsp;&nbsp;&nbsp;
      <br>
      </small></big></td>
      <td style="vertical-align: top; width: 192px;">
      <select name="sex">
      <option></option>
      <option>M</option>
      <option>F</option>
      </select>
      <br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Birthday
(YYYY-MM-DD): <br>
      </small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="birthday"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Username (*):
      <br>
      </small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="username"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Password (*):</small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="password" type="password"></td>
    </tr>
	<tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Re_Password (*):</small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="re_password" type="password"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>E-mail (*):</small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="email"></td>
    </tr>


    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>FinancialInstitution:</small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="financialInstitution"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>CreditDirect:</small></big></td>
      <td style="vertical-align: top; width: 192px;">
      <select name="creditDirect">
      <option></option>
      <option>C</option>
      <option>D</option>
      </select>
      <br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Account
Number:</small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="accountNumber"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Expiry
Date (YYYY-MM-DD):</small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="expiryDate"></td>
    </tr>
    
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small><b><i>Address</i></b></small></big></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Street:</small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="street"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Street number:</small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="streetNbr"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Complement:</small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="complement"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>City:</small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="city"></td>
    </tr>
	<tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Province::</small></big></td>
      <td style="vertical-align: top; width: 192px;">
      <select name="province">
       
      <option>QC</option>
      <option>ON</option>
      <option>NU</option>
      <option>PE</option>
      <option>SK</option>
      <option>YT</option>
      <option>BC</option>
      <option>AB</option>
      <option>MB</option>
      <option>NB</option>
      <option>NL</option>
      <option>NT</option>
      <option>NS</option>
      </select>
      <br>
      </td>
    </tr>
    
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Postal Code:</small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="postalCode"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 250px;"><big><small>Country:</small></big></td>
      <td style="vertical-align: top; width: 192px;"><input name="country" value="Canada" disabled></td>
    </tr>



    
    
    
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
      <td style="vertical-align: top;">
       <input value="Create Account" type="submit">
      </td>
    </tr>
	</form>
  </tbody>
</table>
<br>
(*) Mandatory fields.
<br>

<br>

<br>

<br>

</body></html>